<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- Logo 区域 -->
      <view class="logo-section">
        <view class="logo-icon">
          <view class="custom-logo">
            <text class="logo-text">职</text>
          </view>
        </view>
        <text class="app-title">职场面试</text>
        <text class="app-subtitle">专业面试训练平台</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 手机号输入 -->
        <view class="input-group">
          <view class="input-wrapper">
            <uv-icon name="phone-fill" color="#4ECDC4" size="24" />
            <input 
              class="form-input" 
              placeholder="请输入手机号" 
              v-model="phone"
              type="number"
              maxlength="11"
            />
          </view>
        </view>
        
        <!-- 图形验证码 -->
        <view class="input-group">
          <view class="captcha-row">
            <view class="captcha-input-wrapper">
              <uv-icon name="lock-fill" color="#4ECDC4" size="24" />
              <input 
                class="captcha-input" 
                placeholder="请输入图形验证码" 
                v-model="captchaCode"
                maxlength="4"
              />
            </view>
            <view class="captcha-image" @click="refreshCaptcha">
              <image 
                v-if="captchaImageUrl"
                :src="captchaImageUrl" 
                class="captcha-image-element"
                mode="aspectFit"
              />
              <view v-else class="captcha-loading">
                <text>加载中...</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 验证码输入 -->
        <view class="input-group">
          <view class="input-wrapper">
            <uv-icon name="chat-fill" color="#4ECDC4" size="24" />
            <input 
              class="form-input" 
              placeholder="请输入短信验证码" 
              v-model="smsCode"
              type="number"
              maxlength="6"
              :disabled="!captchaCode"
            />
            <uv-button 
              class="code-btn" 
              :disabled="codeDisabled || !captchaCode"
              @click="sendCode"
             
            >
              {{ codeText }}
            </uv-button>
          </view>
        </view>
        
        <!-- 登录按钮 -->
        <uv-button 
          class="login-btn" 
          @click="handleLogin"
          :loading="loginLoading"
        >
          立即登录
        </uv-button>
        
        <!-- 协议说明 -->
        <view class="agreement-section">
          <text class="agreement-text">
            登录即表示同意
            <text class="agreement-link">《用户协议》</text>
            和
            <text class="agreement-link">《隐私政策》</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { phoneLogin } from '@/api/interview'
import { captchaImage,captchaSms} from '@/api/login'
export default {
  data() {
    return {
      phone: '13025139482',
      smsCode: '111111',
      loginLoading: false,
      codeDisabled: false,
      countdown: 60,
      codeText: '获取验证码',
      // 图形验证码相关
      captchaCode: '',
      captchaAnswer: '',
      captchaId: '',
      captchaImageUrl: '',
      captchaWidth: 100,
      captchaHeight: 36
    }
  },
  methods: {
    // 发送验证码
    sendCode() {
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.captchaCode) {
        uni.showToast({
          title: '请输入图形验证码',
          icon: 'none'
        })
        return
      }
      
      if (!this.captchaId) {
        uni.showToast({
          title: '验证码已过期，请刷新',
          icon: 'none'
        })
        this.refreshCaptcha()
        return
      }
      
      // 调用发送短信验证码API
      captchaSms({
        phone: this.phone,
        imageCaptcha: this.captchaCode
      }).then(res => {
        // 开始倒计时
        this.startCountdown()
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
      }).catch(err => {
        // 如果是验证码错误，刷新验证码
        if (err.message && err.message.includes('验证码')) {
          this.refreshCaptcha()
        }
        
        uni.showToast({
          title: err.message || '发送失败',
          icon: 'none'
        })
      })
    },
    
    // 生成图形验证码
    generateCaptcha() {
      captchaImage().then(res => {
        if (res && res.data) {
          // API直接返回base64图片数据
          this.captchaImageUrl = `data:image/jpeg;base64,${res.data}`
          // 生成一个简单的captchaId用于标识
          this.captchaId = Date.now().toString()
        }
      }).catch(err => {
        console.error('获取验证码失败:', err)
        uni.showToast({
          title: '获取验证码失败',
          icon: 'none'
        })
      })
    },
    
    // 刷新验证码
    refreshCaptcha() {
      this.captchaCode = ''
      this.captchaId = ''
      this.captchaImageUrl = ''
      this.generateCaptcha()
    },
   
    
    // 倒计时
    startCountdown() {
      this.codeDisabled = true
      this.countdown = 60
      this.codeText = `${this.countdown}s`
      
      const timer = setInterval(() => {
        this.countdown--
        this.codeText = `${this.countdown}s`
        
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.codeDisabled = false
          this.codeText = '获取验证码'
        }
      }, 1000)
    },
    
    // 登录
    handleLogin() {
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.smsCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      
      this.loginLoading = true
      
      phoneLogin({
        phone: this.phone,
        smsCaptcha: this.smsCode
      }).then(res => {
        if (res.data && res.data.token) {
          // 保存token
          uni.setStorageSync('token', res.data.token)
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          
          // 跳转到首页或面试页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/interview'
            })
          }, 1500)
        }
      }).catch(err => {
        uni.showToast({
          title: err.message || '登录失败',
          icon: 'none'
        })
      }).finally(() => {
        this.loginLoading = false
      })
          },
      
      // 检查登录状态
      checkLoginStatus() {
        const token = uni.getStorageSync('token')
        if (token) {
          // 已经有token，直接跳转到面试页面
          uni.showToast({
            title: '已登录，正在跳转...',
            icon: 'success',
            duration: 1000
          })
          
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/interview'
            })
          }, 1000)
        }
      }
    },
    mounted() {
      // 检查是否已经登录
      this.checkLoginStatus()
      
      // 初始化图形验证码
      this.$nextTick(() => {
        this.generateCaptcha()
      })
    }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200rpx;
  height: 200rpx;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 150rpx;
  height: 150rpx;
  top: 70%;
  right: 15%;
  animation-delay: 2s;
}

.circle-3 {
  width: 100rpx;
  height: 100rpx;
  top: 30%;
  right: 25%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  width: 100%;
  max-width: 600rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

/* Logo 区域 */
.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.logo-icon {
  margin-bottom: 24rpx;
}

.custom-logo {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8rpx 32rpx rgba(78, 205, 196, 0.3);
}

.logo-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.app-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.app-subtitle {
  display: block;
  font-size: 26rpx;
  color: #666;
}

/* 表单区域 */
.form-section {
  width: 100%;
}

.input-group {
  margin-bottom: 32rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 0 24rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #4ECDC4;
  background: #fff;
  box-shadow: 0 0 0 6rpx rgba(78, 205, 196, 0.1);
}

/* 图形验证码行样式 */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.captcha-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 0 24rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.captcha-input-wrapper:focus-within {
  border-color: #4ECDC4;
  background: #fff;
  box-shadow: 0 0 0 6rpx rgba(78, 205, 196, 0.1);
}

.captcha-input {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
  background: transparent;
  border: none;
}

.captcha-input::placeholder {
  color: #999;
}

.captcha-image {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 72rpx;
}

.captcha-image:active {
  border-color: #4ECDC4;
}

.captcha-image-element {
  width: 100%;
  height: 100%;
}

.captcha-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22rpx;
  color: #999;
}

.form-input {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.form-input::placeholder {
  color: #999;
}

.form-input[disabled] {
  background: #f5f5f5 !important;
  color: #ccc !important;
  cursor: not-allowed;
}

.form-input[disabled]::placeholder {
  color: #ddd !important;
}

.code-btn {
  margin-left: 16rpx;
  border-radius: 12rpx !important;
  font-size: 24rpx !important;
  padding: 0 24rpx !important;
  height: 60rpx !important;
  transition: all 0.3s ease;
}

.code-btn[disabled] {
  background: #d9d9d9 !important;
  color: #999 !important;
  border: 2rpx solid #d9d9d9 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 88rpx;
  background: #4ECDC4 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 16rpx !important;
  font-size: 32rpx !important;
  font-weight: bold !important;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.3);
  transition: all 0.3s ease;
}

.login-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);
}

/* 协议说明 */
.agreement-section {
  text-align: center;
}

.agreement-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

.agreement-link {
  color: #4ECDC4;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .login-card {
    margin: 20rpx;
    padding: 40rpx 30rpx;
  }
  
  .app-title {
    font-size: 42rpx;
  }
  
  .form-input, .captcha-input {
    font-size: 26rpx;
  }
  
  .captcha-image {
    width: 160rpx;
    height: 60rpx;
  }
}
</style>